<template>
  <div class="login-all">
    <div class="bg-image" />
    <div class="text">
      <p>ERP后台管理系统</p>
      <div class="form-list">
        <img style="width:24px;height:24px" src="../assets/icon/user.png" >
        <a-input v-model:value="userMessage" placeholder="用户名/账号" style="margin-left:10px"/>
      </div>
      <div class="form-list">
        <img style="width:24px;height:24px" src="../assets/icon/login-password.png" >
        <a-input-password v-model:value="userPassword" placeholder="请输入密码" style="margin-left:10px;"/>
      </div>
      <div class="rember">
        <a-checkbox v-model:checked="checked" @click="changeRember" style="color:#fff;">记住密码</a-checkbox>
        <a target="_blank">忘记密码?</a>
      </div>
      <a-button ghost class="login-btn" @click="login">登录</a-button>
      <div class="zhuce" @click="register">点击注册</div>
      <div class="more">
        <a-checkbox v-model:checked="agree" class="checkbox">点击同意代表你已同意 <a href="#" >《服务协议》</a></a-checkbox>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import { notification } from 'ant-design-vue';
import { ref } from 'vue';

const router = useRouter()
const checked = ref(false)
const userPassword = ref('')
const userMessage = ref('')
const user = ref('admin')
const userPassword1 = ref('123456')

//是否记住密码
const changeRember = () => {
  checked.value = !checked.value
}
const register = () => {
  router.push('/register')
}

//登录提交
const login = () => {
  if(checked.value){
    localStorage.setItem('user', userMessage.value)
    localStorage.setItem('userPassword', userPassword.value)
  }
  //判断账户和密码
  if(userMessage.value !== user.value || userPassword.value !== userPassword1.value){
    notification['error']({
      message: '登陆提示',
      description:'登录账号错误或密码有误！'
    });
  } else {
    notification['success']({
      message: '登陆提示',
      description:'登陆成功'
    });
    router.push('/home')
  }
}
</script>

<style scoped lang="less">
.login-all{
  background-color: #f5f5f5;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  .bg-image{
    background-image: url('../assets/images/background.png');
    background-repeat: no-repeat;//将图片样式不重复
    background-size: 100% 100%;  //设置图片大小
    position: fixed; /* 充满全屏 */
    height: 100%; //设置div高度
    width: 100%;
  }
  .text{
    position: fixed;
    right: 14%;
    width: 380px;
    height: 340px;
    background: rgba(255, 255, 255, 0.37);
    border-radius: 16px;
    box-shadow: 0 40px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(3.5px);
    -webkit-backdrop-filter: blur(3.5px);
    border: 1px solid rgba(255, 255, 255, 0.7);
    p{
      width: 100%;
      height: 60px;
      line-height: 60px;
      color: #eee;
      text-align: center;
      font-size: 24px;
      // margin-top: 20px;
    }
    .form-list{
      width: 90%;
      display: flex;
      align-items: center;
      justify-content: space-around;
      margin:12px 18px 
    }
    .rember{
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin:20px 8% 0 8%;
      color: #fff;
      a:hover {color: #333}
    }
    .login-btn{
      width: 60%;
      height: 40px;
      margin: 10px 0 0 22%;
      text-align: center;
      font-weight: 550;
      font-size: 18px;
    }
    .zhuce{
      color: #f3f3f3;
      text-align: center;
      margin-top: 10px;
    }
    .zhuce:hover{
      cursor: pointer;
      color: #2f6aff;
    }
    .more{
      text-align: center;
      .checkbox{
        margin-top: 30px;
        font-size: 12px;
        color: #fff;
      }
    }
  }
}
</style>
